﻿@{
    Layout = "~/Views/Shared/_LayoutBase.cshtml";
}
@section Script{
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.8.17.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
    @*<script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script type="text/javascript">
        var params = { "other_params": "sensor=true&language=zh-CN&region=chn9", "base_domain": "ditu.google.cn" };
        google.load("maps", "3", params);
    </script>*@
    <script src="@Url.Content("~/Scripts/jsrender.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/AjaxLogin.js")" type="text/javascript"></script>
    <link rel="stylesheet" href="@Url.Content("~/Content/animate.css")" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="@Url.Content("~/Content/style1.css")" type="text/css" media="screen, projection">
    <link rel="stylesheet" href="@Url.Content("~/Content/style.css")" type="text/css" media="screen, projection">
    <script type="text/javascript">
        $(function () {
            var initGrid = function () {
                var table = { c1: "zhang", c2: "qian", c3: "zhou" };

                var getOb = function (i) {
                    var table1 = {};
                    for (var p in table) {
                        table1[p] = table[p] + i;
                    }
                    return table1;
                }

                var getTables = function (seed) {
                    var tables = [];
                    for (var i = 30; i > 0; i--) {
                        tables[i - 1] = getOb(i + seed);
                    }
                    return tables;
                }

                var seed = 0;
                $("tbody").html($("#movieTemplate").render(getTables(seed)));

                $("#flesh").click(function () {
                    $("tbody").html($("#movieTemplate").render(getTables(++seed)));
                    if (Modernizr.cssanimations) {
                        $("table td span").css("display", "block").addClass("animated fadeInRight");
                    }
                });
            }

            var map;
            var initMap = function () {
                //initMain("map");
                if (map) return;
                //init gmap
                var params = {
                    other_params: "sensor=true&language=zh-CN&region=chn9",
                    base_domain: "ditu.google.cn",
                    callback: function () {
                        var geocoder;
                        geocoder = new google.maps.Geocoder();
                        geocoder.geocode({ address: "changzhou" }, function (r, s) {
                            if (s == google.maps.GeocoderStatus.OK) {
                                var mapOptions = {
                                    //control
                                    panControl: false,
                                    zoomControl: true,
                                    mapTypeControl: true,
                                    rotateControl: false,
                                    scaleControl: true,
                                    streetViewControl: false,
                                    overviewMapControl: true,

                                    zoom: 12,
                                    center: r[0].geometry.location,
                                    mapTypeId: google.maps.MapTypeId.TERRAIN
                                };
                                map = new google.maps.Map($("#map")[0], mapOptions);
                                //add marker
                                google.maps.event.addListener(map, 'click', function (e) {
                                    //placeMarker(e.latLng, map);
                                    var a = e.latLng;
                                    var b = 123;
                                    placeInfoWindow(e.latLng, map);
                                });
                                var placeInfoWindow = function (latLng, map) {
                                    var infowindow = new google.maps.InfoWindow({
                                        content: '<div style="overflow: hidden;">'+latLng.Pa +", "+latLng.Qa+'</div>',
                                        position: latLng
                                    });
                                    infowindow.open(map);
                                };
                                function placeMarker(position, map) {
                                    var marker = new google.maps.Marker({
                                        position: position,
                                        map: map
                                    });
                                    //map.panTo(position);
                                }

                            } else {
                                alert("Geocode was not successful for the following reason: " + status);
                            }
                        });
                    }
                };
                yepnope.injectJs("http://www.google.com/jsapi", function () {
                    google.load("maps", "3", params);
                });
            };

            var _divs = {};
            var ina = ["flipInX", "flipInY", "fadeIn", "fadeInUp", "fadeInDown", "fadeInLeft",
            "fadeInRight", "fadeInUpBig", "fadeInDownBig", "fadeInLeftBig", "fadeInRightBig",
            "bounceIn", "bounceInDown", "bounceInUp", "bounceInLeft", "bounceInRight",
            "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "rollIn"];
            var outa = ["flipOutX", "flipOutY", "fadeOut", "fadeOutUp", "fadeOutDown", "fadeOutLeft",
            "fadeOutRight", "fadeOutUpBig", "fadeOutDownBig", "fadeOutLeftBig", "fadeOutRightBig",
            "bounceOut", "bounceOutDown", "bounceOutUp", "bounceOutLeft", "bounceOutRight",
            "rotateOut", "rotateOutDownLeft", "rotateOutDownRight", "rotateOutUpLeft", "rotateOutUpRight", "rollOut"];
            var initMain = function ($a) {
                var name = $a.data("val");
                if (name == undefined) return;

                var $div = _divs[name], url = $a.attr("href");
                if (!$div) {
                    _divs[name] = $div = $.get(url).done(function (data) {
                        $(data).appendTo("#main");
                        $("#main>div:visible").hide();
                        $("#main").removeClass();
                        setTimeout(function () { $("#" + name).show(); $("#main").addClass("animated fadeInDown"); }, 1);

                        if (name == "map") {
                            initMap();
                        }
                        if (name == "grid") {
                            initGrid();
                        }

                    });
                } else {
                    $("#main>div:visible").removeClass();
                    setTimeout(function () {
                        $("#main>div:visible").addClass("animated " + outa[Math.ceil(Math.random() * 22)]);
                        setTimeout(function () {
                            $("#main>div:visible").hide();
                            $("#" + name).removeClass();
                            setTimeout(function () {
                                $("#" + name).show();
                                $("#" + name).addClass("animated " + ina[Math.ceil(Math.random() * 22)]);
                            }, 1);
                        }, 1000);
                    }, 1);

                    if (name == "map") {
                        initMap();
                    }
                    if (name == "grid") {
                        initGrid();
                    }
                }
            };

            //Dynamically assign height
            var sizeContent = function () {
                var newHeight = $("html").height() - $("header").height() - $("footer").height() + "px";
                $("#main").css("height", newHeight);
            }

            var initBody = function () {
                //#main_height
                sizeContent();

                //nav_click
                $("nav a").click(function (e) {
                    var $a = $(this);
                    var $other = $("nav a.selected");

                    if (!$a.hasClass("selected")) {
                        $other.removeClass();
                        $a.addClass("selected");
                    }

                    initMain($a);
                    e.preventDefault();
                });

                //nav_select to page init
                if ($("nav a.selected").length != 0) {
                    $("nav a.selected").click();
                } else {
                    $("nav a:first").click();
                }
            };

            initBody();
            //Every resize of window
            $(window).resize(sizeContent);
        })
    </script>
}
<header>
    <nav>
        <ol class="clearfix">
            <li><a href="/home/grid" data-val="grid" title="切换到即时图表">表格</a></li>
            <li><a href="/home/map" data-val="map" title="切换到即时地图">地图</a></li>
            <li><a href="#" title="查看历史记录">日志</a></li>
            <li><a href="#" title="查看历史记录">图表</a></li>
            <li><a href="#" title="自定义功能">配置</a></li>
            <li><a href="#" title="管理员功能">管理</a></li>
        </ol>
    </nav>
    <div id="search" class="clearfix">
        <div id="logo">
            <a href="/">
                <img src="/images/logo.jpg" alt="美淼国际" class="logo1" /></a></div>
        <div id="search-1">
            <input type="text" />
            <button>
                查找</button></div>
    </div>
</header>
<div id="main">
</div>
<footer><a href="http://www.maymuse.com" target="_blank">美淼中国</a>  版权所有</footer>
